// Dance
DLSS.Dance = Ext.data.Record.create([
    {name: 'id'},
    {name: 'name', type: 'string'},
    {name: 'abbreviation', type: 'string'},
]);
DLSS.dancesReader = new Ext.data.XmlReader({record:'dance'},
    ['id', 'name', 'abbreviation'], DLSS.Dance);
    	
DLSS.dancesStore = new Ext.data.Store({
    url: 'dancesList.htm',
    reader: DLSS.dancesReader,
    sortInfo:{field:'name', direction:'ASC'}
});

DLSS.categDancesStore = new Ext.data.Store({
     url: 'categDancesList.htm',
     reader: DLSS.dancesReader,
     sortInfo:{field:'name', direction:'ASC'}
});

DLSS.dancesColumnModel = new Ext.grid.ColumnModel([
    {id:'dance', header:"Name", width: 70, sortable: true, dataIndex: 'name', editor: new Ext.form.TextField({allowBlank: false})},
    {header: "Abbreviation", width: 40, sortable: true, dataIndex: 'abbreviation', editor: new Ext.form.TextField({allowBlank: false})},
]);
DLSS.dancesColumnModel.defaultSortable = true;

// Dance CRUD form
DLSS.allDancesGrid = new Ext.grid.GridPanel({
    store: DLSS.dancesStore,
    autoHeight:true,
    viewConfig:{
        forceFit:true
    },
    columns: [
        {header:"Available",width:'100%', dataIndex: 'name', sortable: false,menuDisabled:true,resizable:false,fixed:true}],
    border:false,
    frame:false,
    header:false,
    hideHeaders:true
});

DLSS.allDancesPanel = new Ext.Panel({
    title:'Available',
    frame:false,
    width:220,
    height:250,
    autoScroll:true,
    style:'margin-bottom:10px; margin-left:20px; margin-top:30px;',
    items:[DLSS.allDancesGrid],
    cellCls:'top-align'
});

DLSS.selectedDancesGrid = new Ext.grid.GridPanel({
    store: DLSS.categDancesStore,
    autoHeight:true,
    columns: [{header: "Selected", width: 215, dataIndex: 'name', sortable: false,menuDisabled:true,resizable:false,fixed:true}],
    border:false,
    frame:false,
    header:false,
    hideHeaders:true
});
DLSS.selectedDancesPanel = new Ext.Panel({
    title:'Selected',
    frame:false,
    width:220,
    height:250,
    style:'margin-bottom:10px; margin-top:30px;',
    autoScroll:true,
    items:[DLSS.selectedDancesGrid],
    cellCls:'top-align'
});

DLSS.selectDanceButtonsPanel = new Ext.Panel({
    border:false,
    header:false,
    frame:false,
    height:45,
    width:45,
    html:""
});

// Modal Dance window
DLSS.categDancesModal = {
	show: function() {
		var win;
		// create the window on the first click and reuse on subsequent clicks
		if(!win){
		     win = new Ext.Window({
		         title: "Select Dances for category",
		         layout:'fit',
		         modal:true,
		         border:false,
		         width:540,
		         height:350,
		         closeAction:'hide',
		         plain: true,
		         items: [
		         	new Ext.Panel({
	    				frame:false,
	    				border:false,
	    				region:'center',
	    				layout:'table',
	    				layoutConfig:{
	        				columns:3
	    				},
	    				items:[
					        DLSS.allDancesPanel,
	        				DLSS.selectDanceButtonsPanel,
	        				DLSS.selectedDancesPanel
	    				]
	    			})
	    		 ],	
		         buttons: [
		         	{text:DLSS.getMessage('button_submit'), handler: function(){DLSS.categDancesModal.performAction(); win.hide();}},
		         ]
		     });
		 }
		 DLSS.selectDanceButtonsPanel.on('render', function(){
			DLSS.selectDanceButtonsPanel.body.createChild({cls:'x-tool x-tool-right',style:'margin-right:15px'}).on('click',DLSS.categDancesModal.addSelected,this);
    		DLSS.selectDanceButtonsPanel.body.createChild({cls:'x-tool x-tool-left',style:'margin-right:15px; margin-top:15px;'}).on('click',DLSS.categDancesModal.remSelected,this);
    		DLSS.categDancesModal.refreshGrids;
		 }, this);
		 win.show(this);    
	},
	
    addSelected:function() {
        var record = DLSS.allDancesGrid.getSelectionModel().getSelected();
        if(record) {
            var counter = DLSS.categDancesStore.getTotalCount();
            var exists = false;
            for(var i=0; i<counter; i++) {
            	if(DLSS.categDancesStore.getAt(i).get('id') == record.get('id')) {
            		exists = true;
            		return;
            	}
            }
            if(!exists) {
	            Ext.Ajax.request({url:"addCategDance.htm?id="+record.get('id'),
	                success:DLSS.categDancesModal.refreshGrids, scope:this
	            });
	        }
        }
    },
    remSelected: function() {
        var record = DLSS.selectedDancesGrid.getSelectionModel().getSelected();
        if(record) {
           Ext.Ajax.request({
               url:"remCategDance.htm?id="+record.get('id'),
               success:DLSS.categDancesModal.refreshGrids,
               scope:this
           });
        }
    },
    refreshGrids: function() {
        DLSS.dancesStore.reload();
        DLSS.categDancesStore.reload();
    },
	
	performAction: function() {
  		//DLSS.categoriesForm.form.submit({url: 'categoryUpdate.htm', waitMsg: 'Saving Data...', success: DLSS.categoriesModal.doneFunction});
    }, 
  
    doneFunction: function(form,action) {
    	//alert("success");
    	//DLSS.categoriesStore.reload();
    }
	
};